<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <title>商城</title>
        <link rel="stylesheet" href="/css/common.css">
        <link rel="stylesheet" href="/css/base2018.css">
        <link rel="stylesheet" href="/css/store.css">
    </head>
    <body>
        <div class="main">
            <div class="adv">
                <img />
            </div>
            <div class="store clearfix">
                <div class="store-l">
                    <div class="store-intro">
                        <div class="big-img" id="bigimg"><img th:src="@{'/imges/'+${traList.traImg}}" /></div>
                        <div class="img-list" id="imglist">
                            <ul class="clearfix">
                                <li><img class="current" th:src="@{'/imges/'+${traList.traImg}}" /></li>
                            </ul>
                        </div>                    
						</div>
                </div>
                <div class="store-r">
                    <div class="title-info">
                        <div class="title">
                            <h1>[[${traList.TraName}]]</h1>
                        </div>
                        <p>[[${traList.TraIntraduce}]]</p>
                    </div>
                    <div class="goods-info">
                        <div class="goods-intro">
                            <ul>
                                <li>
                                    <span class="intro-title">[[${traList.TraTitle}]]：</span>
                                    <div class="default">
                                        <a href="javascript:;">[[${traList.TraName}]]</a>
                                        <i class="explain">CCC</i>
                                    </div>
                                </li>
                                <li>
                                    <span class="intro-title">旅游编号：</span>
                                    <div class="default">B12000000489</div>
                                </li>
                                <li>
                                    <span class="intro-title">游客满意度：</span>
                                    <div class="default">
                                        <span>[[${traList.TraStisficing}]]</span>
                                        <a class="blue" href="javascript:;">（国家旅游总局查询）</a>
                                    </div>
                                </li>
                                <li>
                                    <span class="intro-title">价格：</span>
                                    <div class="default"><i class="price">¥[[${traList.TraPrice}]]元</i></div>
                                </li>
                                <li>
                                    <div class="default mt10">
                                        <input class="buy" type="button" value="立即购买"  onclick="run()"/>
                                        <button class="tocar" type="button"><a th:href="@{/shoppingCar/addShopping(traId=${traList.traId})}" >加入心愿单</a></button>
                                    </div>
                                </li>

                                <li>
                                    <span class="intro-title">用户评价：</span>
                                    <div class="default">
                                        <div class="level">
                                            <a th:href="@{/comment/findAllComment(traId=${traList.traId})}">查看评论</a>
                                        </div>
                                        <a class="levela" href="javascript:;">（已有391人评价）</a>
                                    </div>
                                </li>
                                <li>
                                    <a th:href="@{/shoppingCar/selectCar(traId=${traList.traId})}">查看心愿单</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">

            function run(){
                alert("购买成功！")
            }



            window.onload = () => {
                /*滑动切换商品图片*/
                let bigImg = document.getElementById("bigimg").children[0],
                    imgBox = document.getElementById("imglist"),
                    liEle = imgBox.getElementsByTagName("li"),
                    imgEle = imgBox.getElementsByTagName("img"),
                    firstSrc = liEle[0].children[0].getAttribute("src");
                bigImg.setAttribute("src",firstSrc);
                for(let i=0; i<liEle.length; i++){
                    liEle[i].onmouseenter = (e) => {
                        var e = e || window.event;
                        for(let j=0; j<imgEle.length; j++){
                            imgEle[j].className = "";
                        }
                        e.target.children[0].className = "current";
                        let thisSrc = e.target.children[0].getAttribute("src");
                        bigImg.setAttribute("src",thisSrc);
                    }
                }
                /*点击选择规格*/
                let speci = document.getElementById("speci"),
                    speciChoose = speci.getElementsByTagName("a");
                for(let i =0; i<speciChoose.length; i++){
                    speciChoose[i].onclick = (e) => {
                        var e = e || window.event;
                        for(let j=0; j<speciChoose.length; j++){
                            speciChoose[j].className = "choose";
                        }
                        e.target.className = "choose current";
                    }
                }
                /*点击修改数量*/
                let buyNum = '';
                addNum = (maxNum) => { //加--maxNum为最大值
                    let initNum = parseInt(document.getElementById("buyNum").value);
                    document.getElementById("buyNum").value = initNum+1;
                    if(initNum == maxNum){
                        document.getElementById("buyNum").value = maxNum;
                        alert("已经是最大值了！！");
                    }
                }
                lessenNum = () => { //减
                    let initNum = parseInt(document.getElementById("buyNum").value);
                    document.getElementById("buyNum").value = initNum-1;
                    if(initNum == 1){
                        document.getElementById("buyNum").value = 1;
                        alert("至少选择一个噢！！");
                    }
                }
            }
        </script>
    </body>
</html>
